<template>
  <div class="p-iselect">
    <dl class="tab">
      <dt>{{ name }}<i class="el-icon-arrow-down el-icon--right" /></dt>
      <dd>
        <h3>{{ name }}</h3>
        <span 
          v-for="(item, index) of list"
          :key="index"
        >{{ item }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .p-iselect
    padding-bottom 5px
    min-width 120px
    .tab
      position relative
      dt
        font-size 14px
        line-height 24px
      dd
        position absolute 
        display none 
        top 24px
        width 510px
        padding 19px 15px 9px
        background-color #ffffff
        white-space normal 
        font-size 12px
        text-align left 
        border 1px solid #e5e5e5
        border-radius 4px
        user-select text

        cursor pointer
        &::before
        &::after
          content ''
          position absolute
          top -11px 
          display block
          width 0
          height 0
          border-width 5px
          border-style solid
          border-color transparent transparent #e5e5e5
        &::after
          top -8px
          left 16px
          border-width 4px
          border-color transparent transparent #ffffff
        span
          display inline-block
          min-width 120px
          line-height 1.5
          font-weight 500
        h3
          color #cccccc
          font-size 16px
          margin-bottom 11px
      &:hover
        dd
          display block
          z-index 99
</style>
